<!doctype html>
<html lang="zh-hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
	<link rel="Shortcut Icon" type="image/ico" href= "" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="lib/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/style.css">

    <title>weishan念念碎</title>
</head>
<body>
    
    <nav class="navbar navbar-inverse navbar-fixed-top">
        <div class="container">
            <div class="navbar-header">
                <button class="navbar-toggle" data-toggle="collapse" data-target="#responsive-navbar">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a href="index.html" class="navbar-brand"><strong>webDemo</strong></a>
            </div>
            <div class="collapse navbar-collapse" id="responsive-navbar">
            <ul class="nav navbar-nav">
                <li class="active"><a href="index.html">web案例</a></li>
                <li><a href="article.html">博客</a></li>
                
            </ul>
            <form action="" class="navbar-form navbar-left">
                <input type="text" placeholder="搜索" class="form-control">
                <button type="submit">
                    <span class="glyphicon glyphicon-search"></span>
                </button>
            </form>
            <a href="" class="btn btn-primary btn-sm navbar-btn navbar-right hidden-xs"data-toggle="modal" data-target="#login-modal">订阅案例</a>
            <div class="profile navbar-right">
                <ul class="nav navbar-nav">
                    <li><a href="" data-toggle="modal" data-target="#login-modal">登录</a></li>
                    <li><a href="">注册</a></li>
                </ul>
            </div>
        </div>
        </div>
    </nav>
    	<div id="ad-carousel" class="carousel slide" data-ride="carousel" style="height:100%;overflow:hidden;">
		   <div class="carousel-inner">
				<div class="top-banner">
				      <div class="banner-mask">
					       <div class="top-content">
						        <img class="header-icon" src="images/header-icon.jpg">
								<div class="header-title">
								    <span class="school">就读于技师学院</span><br>
									<span>伍玮汕</span>
								</div>
								<p class="welcome">Welcome WebDemo </p>
								
								<a href="javascript:void(0)" class="please-btn">求关注</a>
								<p class="profession-copy">web开发没有捷径，只有努力和积累。欢迎大家加QQ969804929学习交流</p>
								<div class="num-detail">
								     <div class="anli-left">
									    <span>8</span>
										<span class="anli">案例</span>
									 </div>
									 <div class="anli-right">
									    <span>0</span>
										<span class="fensi">粉丝</span>
									 </div>
								</div>
						   </div>
					  </div>
					  <div class="banner-bottom"></div>
				 </div>
				 
				 
				 
				<!--
					<video src="images/1.mp4" autoplay loop width="100%"></video>
					 <div class="carousel-caption">
							<h2>欢迎来到webDemo</h2>
							<p>如果我们把网页设计看作一门艺术，web攻城狮则通过技术来呈现这门艺术。成为一名优秀的web开发人员没有捷径，只有努力和积累。</p>
					 </div>
				-->
			</div>
		</div>
        <!-- <div class="carousel slide" id="slideshow" data-interval="1000" data-pause="false" data-wrap="false">  -->
		<!--
		<div id="ad-carousel" class="carousel slide" data-ride="carousel">
            <ol class="carousel-indicators">
                <li data-target="#ad-carousel" data-slide-to="0" class="active"></li>
                <li data-target="#ad-carousel" data-slide-to="1"></li>
                <li data-target="#ad-carousel" data-slide-to="2"></li>
            </ol>
            
            <div class="carousel-inner">
                <div class="item active">
				    
                    <img src="images/01.jpg" alt="">
                    <div class="carousel-caption">
                        <h2>Bootstrap</h2>
                        <p>Bootstrap是Twitter推出的一个用于前端开发的开源工具包。它由Twitter的设计师Mark Otto和Jacob Thornton合作开发,是一个CSS/HTML框架。</p>
                    </div>
                </div>
                <div class="item">
                    <img src="images/02.jpg" alt="">
                    <div class="carousel-caption">
                        <h2>JavaScript</h2>
                        <p>JavaScript 是属于网络的脚本语言! JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。</p>
                    </div>
                </div>    
                <div class="item">
                    <img src="images/01.jpg" alt="">
                    <div class="carousel-caption">
                        <h2>HTML+CSS</h2>
                        <p>学习HTML、CSS样式基础知识，可以利用HTML、CSS样式技术制作出简单页面</p>
                    </div>
                </div>
				
            </div>
            
            <a href="#ad-carousel" data-slide="prev" class="left carousel-control">
                <span class="glyphicon glyphicon-chevron-left"></span>
            </a>
            <a href="#ad-carousel" data-slide="next" class="right carousel-control">
                <span class="glyphicon glyphicon-chevron-right"></span>
            </a>  
                
        </div>
		-->
        
        
        <!-- <div class="text-center" style="padding: 20px;"> 
            <div class="btn-group">
                <button class="btn btn-default prev-slide">
                    <span class="glyphicon glyphicon-backward"></span>
                </button>
                <button class="btn btn-default play-and-stop">
                    <span class="glyphicon glyphicon-play"></span>
                </button>
                <button class="btn btn-default next-slide">
                    <span class="glyphicon glyphicon-forward"></span>
                </button>
            </div>
        </div>-->
	
    <section id="Demo">   
<!--缩略图效果-->
            <div class="container" style="padding:20px;background-color:white;text-align:center">
				<h2 class="page-header">前端小案例</h2>
				<div class="row">
					<div class="col-md-4">
						<a href="ajaxinput.html" target="_blank" class="thumbnail"><img src="images/ajax.jpg"></a>
						<div class="caption">
							<h4>Ajax搜索框提示</h4>
						</div>
					</div>
					<div class="col-md-4">
						<a href="left/index.html" target="_blank" class="thumbnail"><img src="images/侧边栏.jpg"></a>
						<div class="caption">
							<h4>html+css侧边栏</h4>
						</div>
					</div>
					<div class="col-md-4">
						<a href="javascript验证/index.html"target="_blank" class="thumbnail"><img src="images/javascript.jpg"></a>
						<div class="caption">
							<h4>JavaScript表单验证</h4>
						</div>
					</div>
					<div class="col-md-4">
						<a href="css动画/index.html" target="_blank"class="thumbnail"><img src="images/css技巧.jpg"></a>
						<div class="caption">
							<h4>css技巧</h4>
						</div>
					</div>
					<div class="col-md-4">
						<a href="aiqiyi/index.html" target="_blank"class="thumbnail"><img src="images/jQuery.jpg"></a>
						<div class="caption">
							<h4>jQuery实现爱奇艺轮播</h4>
						</div>
					</div>
					<div class="col-md-4">
						<a href="modernizr/index.html" target="_blank" class="thumbnail"><img src="images/Modernizr.jpg"></a>
						<div class="caption">
							<h4>Modernizr.js--兼容性强大的插件</h4>
						</div>
					</div>
					<div class="col-md-4">
						<a href="唱吧/index.html" target="_blank" class="thumbnail"><img src="images/唱吧.jpg"></a>
						<div class="caption">
							<h4>css动画技术实现唱吧banner特效</h4>
						</div>
					</div>
					<div class="col-md-4">
						<a href="cake/index.html" target="_blank" class="thumbnail"><img src="images/企业官网.jpg"></a>
						<div class="caption">
							<h4>HTML+CSS+JQ仿甘一客首页</h4>
						</div>
					</div>
				</div>
	</section>
    <section id="project">
	         
	         <div class="container-lun">
			     
			     <div id="ad-carousel" class="carousel slide" data-ride="carousel">
				     
				     <div class="carousel-inner">
					 
						<div class="item active">
							  <div class="col-md-6 wow fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
									<h2>web项目开发</h2>
									<p>2016.10学校举办多迪杯网页制作竞赛，以广府文化为大标题（内容可以是美食，文化，建筑）制作网页</p>
									<p><span class="glyphicon glyphicon-grain mai-icon"></span>我们小组网站打算以综合型为主（集美食，建筑，文化，语音），项目成功通过预赛，但止步决赛</p>
									<p><span class="glyphicon glyphicon-grain mai-icon"></span>反思：网站设计没有特别突出的亮点，一些css命名不规范，总体来说不具备商业价值</p>
							  </div>
							  
							  <div class="col-md-6 wow fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;">
									<a href=""><img src="images/广府文化.jpg" class="img-responsive" alt=""></a>
							  </div>
					    </div>
						<div class="item">
						       <div class="col-md-6 wow fadeInRight animated" style="visibility: visible; animation-name: fadeInRight;">
									<a href=""><img src="images/RFP.jpg" class="img-responsive" alt=""></a>
							  </div>
							  <div class="col-md-6 wow fadeInLeft animated" style="visibility: visible; animation-name: fadeInLeft;">
									<h2>web项目开发</h2>
									<p>2016.10学校举办多迪杯网页制作竞赛，以广府文化为大标题（内容可以是美食，文化，建筑）制作网页</p>
									<p><span class="glyphicon glyphicon-grain mai-icon"></span>我们小组网站打算以综合型为主（集美食，建筑，文化，语音），项目成功通过预赛，但止步决赛</p>
									<p><span class="glyphicon glyphicon-grain mai-icon"></span>反思：网站设计没有特别突出的亮点，一些css命名不规范，总体来说不具备商业价值</p>
							  </div>
							  
							 
					    </div>
					 </div>
					 
				  </div>
			 </div>
			
	</section>
    <footer>
    <div class="container"style="padding:20px;background-color:#fff;width:100%;text-align:center;line-height:25px">
        <div class="row">
            <div class="col-md-12">
                <p>
                    Copyright&nbsp;©&nbsp;2012-2015&nbsp;&nbsp;欢迎加QQ969804929;一起交流学习&nbsp;&nbsp;本网站不做商业用途
					   <br>在此也感谢慕课网 潭州学院提供技术支持
                </p>
            </div>
        </div>
    </div>
	</footer>
    <div class="modal fade" id="login-modal" tabindex="-1" data-remote="login-form.html">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4>欢迎来到webDemo</h4>
                </div>
                <div class="modal-body">
                    <input type="text" placeholder="订阅最新web案例请留下邮箱" style="border:0px;color:#000;width:380px;height:50px;outline:none;"></intput>
                </div>
                <div class="modal-footer">
                    <button class="btn btn-primary">订阅</button>
                </div>
            </div>

        </div>
    </div>
    
    
    <script src="lib/jquery-2.1.1.min.js"></script>
    <script src="lib/bootstrap/js/bootstrap.min.js"></script>
    <script src="lib/holder.js"></script>
    <script src="js/app.js"></script>
    <script>
    //$('#login-modal').modal('show');
        $(function() {
            $('#login-modal').modal({
                show: false,
                backdrop: false,
                remote: 'login-form.html'
            });
        });
/**/        $(function() {
            $('#login-modal').on('show.bs.modal', function() {
                console.log('显示对话框');
            });
            $('#login-modal').on('shown.bs.modal', function() {
                console.log('对话框已经显示了');
            });
            $('#login-modal').on('hide.bs.modal', function() {
                console.log('隐藏对话框');
            });
            $('#login-modal').on('hidden.bs.modal', function() {
                console.log('隐藏了对话框');
            });
            $('#login-modal').on('loaded.bs.modal', function() {
                console.log('已经加载好了对话框里面的内容');
            });
            $('#slideshow').on('slide.bs.carousel', function() {
                console.log('播放幻灯片');
            });
            $('#slideshow').on('slid.bs.carousel', function() {
                console.log('播放完成！');
            });            
        });
    </script>
</body>
</html>



















